import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    ScrollView,
    I18nManager,
    DeviceEventEmitter,
    Platform
} from 'react-native';

import PropTypes from 'prop-types'

import {Theme, ListRow, Overlay, Label, Button, Checkbox} from 'teaset';
const {height, width} = Dimensions.get('window');
export default class DeDeleteImgPage extends Component {
    static propTypes = {
        pageWidth: PropTypes.number,
        initialPage: PropTypes.number,
        noItemsText: PropTypes.string,
        onPageChange: PropTypes.func,
        sneak: PropTypes.number,
        transitionDelay: PropTypes.number,
        currentPage: PropTypes.number,
        swipeThreshold: PropTypes.number
    };
    constructor(props) {
        super(props);
        this.state = {
            images:this.props.images,
            imageAdd:this.props.imageAdd,
            currentPage: 0,
        }
    };
    _onAnimationEnd(e) {
        let offsetX = e.nativeEvent.contentOffset.x;
        let pageIndex = Math.floor(offsetX / width);
        this.setState({ currentPage: pageIndex });
    }

    showPop=(type, modal, text)=>{
        let overlayView = (
            <Overlay.PopView
                style={{alignItems: 'center', justifyContent: 'center'}}
                type={type}
                modal={modal}
                ref={v => this.overlayPopView = v}
            >
                <View style={{backgroundColor: Theme.defaultColor,width:240, alignItems: 'center',borderRadius:10,height:157/2}}>
                    <View style={styles.overlayTopView}>
                        <Text style={styles.overlayTopMsg}>是否删除本张图片?</Text>
                    </View>
                    <View style={styles.overlayBottomView}>
                        <TouchableOpacity
                            onPress={() => this.overlayPopView && this.overlayPopView.close()}
                            style={styles.overlayBottomLeftView}>
                            <Text style={styles.overlayBottomLeftMsg}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={()=>this.deleting(this.state.currentPage)}
                            style={styles.overlayBottomRightView}>
                            <Text style={styles.overlayBottomRightMsg}>删除</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Overlay.PopView>
        );
        Overlay.show(overlayView);
    };

    deleting=(number)=>{
        let a=this.state.imageAdd.length;
        let b=this.state.images.length;
        if(number<a+b-1){
            if(number<this.state.images.length){
                this.setState({
                    currentPage:number
                });
                this.state.images.splice(number,1);
                this.overlayPopView && this.overlayPopView.close();
            }else {
                this.setState({
                    currentPage:number
                });
                this.state.imageAdd.splice(number-this.state.images.length,1);
                this.overlayPopView && this.overlayPopView.close();
            }
        }else {
            if(number<this.state.images.length){
                this.setState({
                    currentPage:number-1
                });
                this.state.images.splice(number,1);
                this.overlayPopView && this.overlayPopView.close();
            }else {
                this.setState({
                    currentPage:number-1
                });
                this.state.imageAdd.splice(number-this.state.images.length,1);
                this.overlayPopView && this.overlayPopView.close();
            }
        }
    };

    goBack=()=>{
        if(this.props.status==1){
            Actions.pop();
            DeviceEventEmitter.emit('imageChange',this.state.images,this.state.imageAdd)
        }else if(this.props.status==2){
            Actions.pop();
            DeviceEventEmitter.emit('changeImg',this.state.images,this.state.imageAdd)
        }else if(this.props.status==3){
            Actions.pop();
            DeviceEventEmitter.emit('ImgChange',this.state.images,this.state.imageAdd)
        }
    };

    render() {
        const {images,imageAdd}=this.props;
        return (
            <View style={styles.container}>
                <View>
                    <View style={styles.titleView}>
                        <View  style={{position: "absolute",left:15,paddingTop:20,}}>
                            <TouchableOpacity onPress={()=>this.goBack()}>
                                <Image source={ImageUtil.GoBack}/>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:17,color:'#000000'}}>{this.state.currentPage+1}</Text>
                        <Text style={{fontSize:17,color:'#000000'}}>／{images.length+imageAdd.length}</Text>
                        <View style={{position: "absolute",right:15,paddingTop:20}}>
                            <TouchableOpacity onPress={()=>this.showPop('zoomOut', true, 'Pop modal')}>
                                <Image
                                    source={ImageUtil.DeleteTop}
                                    style={styles.titleRightImg}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{height:1,backgroundColor:'#e3e3e4',width:width}}/>
                </View>
                <View style={[ styles.container, this.props.containerStyle ]}>
                    <ScrollView
                        automaticallyAdjustContentInsets={ false }
                        pagingEnabled={true}
                        style={{ flexDirection: (I18nManager && I18nManager.isRTL) ? 'row-reverse' : 'row' }}
                        bounces
                        contentContainerStyle={{paddingLeft: 0, paddingRight: 0}}
                        decelerationRate={ 0.9 }
                        horizontal
                        onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}
                        ref={ c => this.scrollView = c }
                        showsHorizontalScrollIndicator={ false }
                    >
                        {this.state.images.map((c, index)=>{
                            return(
                                <View key={ index }>
                                    <View style={{justifyContent:'center',alignItems:'center',width:width,height:height-64}}>
                                        <Image
                                            source={{uri:"http://106.14.209.177/upload/"+c.name}}
                                            style={{height:300,width:width}}/>
                                    </View>
                                </View>
                            )
                        })}
                        {this.state.imageAdd.map((c, index)=>{
                            return(
                                <View key={ index }>
                                    <View style={{justifyContent:'center',alignItems:'center',width:width,height:height-64}}>
                                        <Image
                                            source={{uri:c.uri}}
                                            style={c.width>width
                                                ?{width:width,height:(c.height/c.width)*width,resizeMode: Image.resizeMode.contain}
                                                :{width:c.width,height:c.height}}/>
                                    </View>
                                </View>
                            )
                        })}
                    </ScrollView>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#eeeff0'
    },
    titleView:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        height:Platform.OS==='ios'?64:44,
        width:width,
        paddingTop:20,
        backgroundColor:'#ffffff'
    },
    titleMsg:{
        fontSize:17,
        color:'#000000'
    },
    titleRightImg:{
        height:20,
        width:20
    },
    overlayTopView:{
        height:45,
        width:240,
        justifyContent:'center',
        alignItems:'center',
        borderTopLeftRadius:10,
        borderTopRightRadius:10
    },
    overlayTopMsg:{
        fontSize:14,
        textAlign:'center',
        color:'#000000'
    },
    overlayBottomView:{
        borderBottomRightRadius:10,
        borderBottomLeftRadius:10,
        height:45.5,
        width:240,
        flexDirection:'row',
        borderTopWidth:0.5,
        borderColor:'#c1c1c1'
    },
    overlayBottomLeftView:{
        borderBottomLeftRadius:10,
        height:33,
        width:120,
        justifyContent:'center',
        alignItems:'center',
        borderRightWidth:0.5,
        borderColor:'#c1c1c1'
    },
    overlayBottomLeftMsg:{
        color:'#6590ff',
        fontSize:14,
        textAlign:'center'
    },
    overlayBottomRightView:{
        height:33,
        width:120,
        justifyContent:'center',
        alignItems:'center',
        borderBottomRightRadius:10
    },
    overlayBottomRightMsg:{
        color:'#6590ff',
        fontSize:14,
        textAlign:'center'
    }
});
